/**
 * @description 自定义的弹框组件
 * @author 韩
 * @desc 组件及API说明：
 * ref-可以获取组件
 * children 用来接收传入的内容组件
 * 
 */


import React, { useImperativeHandle, useState } from "react";
import { Drawer } from "antd";
import "./zc_drawer.module.scss";

const Zc_drawer = (props) => {
    const { drawerRef, children, style } = props;

    const [open, setOpen] = useState(false);

    // 关闭抽屉
    const onClose = () => {
        setOpen(false)
    }

    // 向外暴露一些方法
    useImperativeHandle(drawerRef, () => ({
        setOpen,
        onClose
    }))

    return (
        <>
            <Drawer
                bodyStyle={{
                    // 内容区域样式
                    backgroundColor: "rgb(8 ,38, 74, 82%)",
                    backgroundImage: "linear-gradient(45deg, #02020478, transparent)",
                }}

                maskStyle={{
                    // 遮罩层样式
                    backgroundColor: "rgba(0,0,0,.45)",
                }}
                contentWrapperStyle={{
                    ...style
                }}
                placement={"top"}
                closable={false}
                onClose={onClose}
                open={open}
                key={"top"}
            >
                {children}
            </Drawer>
        </>
    )
}
export default Zc_drawer;